<script setup lang="ts">
import { ref, provide } from "vue"; //导入vue函数
import { useCart } from "@/stores/cart"; //导入cart状态文件
import type { TableInstance } from "element-plus"; //导入表格实例
import { useRouter } from "vue-router"; //引入路由
import { ElMessage } from "element-plus"; //导入消息框
import CartPay from "./CartPay.vue"; //引入自定义组件 - 支付界面

//创建路由实例
const router = useRouter();

//执行方法获得cartStore对象
const cartStore = useCart();

//定义表格实例
const tableRef = ref<TableInstance>();

//选中商品的总价
const selectPrice = ref(0);

//是否显示支付界面
const isShowPay = ref(false);
//通过provide实现跨组件通信
provide("isShowPay", isShowPay); //支付组件是否显示

//删除单个商品
function delGoods(id: number) {
  cartStore.delGoods(id);
}

//清空购物车
function clearCart() {
  cartStore.clearCart();
}

//去购物
function goShoping() {
  router.push("/");
}

//选中商品发生改变
function changeGoodsInfo() {
  //计算选中商品的总价
  const selectGoods = tableRef.value?.getSelectionRows();
  selectPrice.value = 0;
  for (var v of selectGoods) {
    selectPrice.value += v.price * v.discount * v.num;
  }
}

//下单结算
function checkout() {
  //获得选中的商品
  const selectGoods = tableRef.value?.getSelectionRows();
  //判断选中状态
  if (selectGoods.length == 0) {
    ElMessage.warning("请选择要购买的商品");
  } else {
    isShowPay.value = true;
  }
}
</script>

<template>
  <el-table
    ref="tableRef"
    :data="cartStore.cartList"
    class="cart_list"
    @selection-change="changeGoodsInfo"
  >
    <!--空数据时显示内容-->
    <template #empty>
      <div class="cart_empty">
        <div></div>
        <div>
          <div>购物车空空的哦~，去看看心仪的商品吧~</div>
          <div>
            <el-button type="primary" text @click="goShoping"
              >去购物&gt;</el-button
            >
          </div>
        </div>
      </div>
    </template>
    <!--有数据时的显示内容-->
    <el-table-column
      type="selection"
      width="100"
      align="center"
    ></el-table-column>
    <el-table-column label="图片" width="200" align="center">
      <template #default="scope">
        <img :src="scope.row.picture" />
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="商品名称"
      align="center"
    ></el-table-column>
    <el-table-column label="单价" width="150" align="center">
      <template #default="scope">
        <span>￥{{ (scope.row.price * scope.row.discount).toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="数量" width="200" align="center">
      <template #default="scope">
        <el-input-number
          v-model="scope.row.num"
          :min="1"
          :max="scope.row.stock"
          @change="changeGoodsInfo"
        ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="小计" width="150" align="center">
      <template #default="scope">
        <span class="sub"
          >￥{{
            (scope.row.price * scope.row.discount * scope.row.num).toFixed(2)
          }}</span
        >
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template #default="scope">
        <el-button type="primary" text @click="delGoods(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <section class="cart_bar">
    <div>
      共 {{ cartStore.cartList.length }} 件商品，已选择
      {{ tableRef?.getSelectionRows().length }} 件，商品合计：<span
        >￥{{ selectPrice.toFixed(2) }}</span
      >
    </div>
    <div>
      <el-popconfirm
        @confirm="clearCart"
        title="是否清空购物车？"
        confirm-button-text="确认"
        cancel-button-text="取消"
        width="160px"
      >
        <template #reference>
          <el-button type="danger" size="large">清空购物车</el-button>
        </template>
      </el-popconfirm>
      <el-button type="primary" size="large" @click="checkout"
        >下单结算</el-button
      >
    </div>
  </section>

  <!--自定义组件 - 支付界面-->
  <CartPay
    :orderPrice="selectPrice"
    :selectGoods="tableRef?.getSelectionRows()"
  ></CartPay>
</template>

<style scoped>
.cart_list {
  border: 1px solid #ebeef5;
  width: 1200px;
  margin: 20px auto;
}
.cart_list img {
  width: 100px;
  height: 100px;
}
.cart_list .sub {
  color: #cf4444;
  font-size: 15px;
}
.cart_bar {
  border: 1px solid #ebeef5;
  width: 1200px;
  height: 70px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_bar > div {
  margin: 0px 30px;
}
.cart_bar > div > span {
  color: #cf4444;
  font-size: 20px;
  font-weight: bold;
}
.cart_empty {
  margin: 30px auto;
}
</style>
